<template>
	<view class="list-box">
		<view class="list-item box-border  f-row jc-sb ai-c" @tap="jumpPages(i.url,i.id)" v-for="i in list" :key="i.id">
			<view class="f-row ai-c">
				<view class="f-row-f">
					<image :src="i.iconUrl" mode="" class="icon"></image>
					<text>
						{{i.title}}
					</text>
				</view>
				<view class="f-row-r" v-if="i.id == 4">
					{{platformMobile}}
				</view>
				<view class="f-row-r" v-if="i.id == 1">
					<span class="circle" v-if="isRead"></span>
				</view>
			</view>
			<view class="jiantou">

			</view>
		</view>
		<view class="" v-if="showView">
			<web-view :src="viewSrc"></web-view>
		</view>
		<u-modal :show="show" :closeOnClickOverlay="true" :showCancelButton='true' :title="'提示'" @confirm='confirm'
			@cancel='cancel' :content="'是否退出登录？'" confirmColor="#157DFA"></u-modal>
	</view>
</template>

<script>
	import {
		getConfig,getUnread
	} from '@/request/api.js'
	export default {
		props: ['showView'],
		data() {
			return {
				show: false,
				platformMobile: '',
				viewSrc:'',
				isRead:false,
				list: [{
						id: 1,
						title: '我的消息',
						iconUrl: '/static/icon/my/1.png',
						url: '/my_pages/information/information'
					}, {
						id: 2,
						title: '我的卡券',
						iconUrl: '/static/icon/my/2.png',
						// url: `/my_pages/cardLIst/cardLIst`,
						url: `/my_pages/myCard/myCard`,
					},
					{
						id: 3,
						title: '我的订单',
						iconUrl: '/static/icon/my/3.png',
						url: '/my_pages/myOrder/myOrder'
					},
					{
						id: 4,
						title: '招商加盟',
						iconUrl: '/static/icon/my/4.png',
						url: '/my_pages/myTeach/myTeach'
					},
					{
						id: 5,
						title: '团洗官网',
						iconUrl: '/static/icon/my/5.png',
						url: 'https://tx.westts.cn/'
					},
					{
						id: 6,
						title: '洗车记录',
						iconUrl: '/static/icon/my/6.png',
						url: '/my_pages/carWashRecord/carWashRecord'
					},
					{
						id: 7,
						title: '洗车教程',
						iconUrl: '/static/icon/my/7.png',
						url: '/pages/my/wash_courses'
					},
					{
						id: 8,
						title: '兑换码',
						iconUrl: '/static/icon/my/8.png',
						url: '/my_pages/redeemCode/redeemCode'
					},
					{
						id: 9,
						title: '商户端登录',
						iconUrl: '/static/icon/my/8.png',
						url: 'https://txapi.westts.cn/merchant/#/pages/login/login'
						// url: 'https://txh5o.westts.cn/#/#/pages/login/login'
					},
				]
			}
		},
		created() {
			// this.getConfig()
		},
		methods: {
			async getConfig() {
				let res = await getConfig()
				this.platformMobile = res.data.platformMobile
				this.getUnread()
			},
			async getUnread(){
				let res = await getUnread()
				this.isRead =  res.data
				console.log(res,'getUnread')
			},
			confirm() {
				this.$emit('changeInfo', true)
				this.show = false
			},
			cancel() {
				this.show = false
			},
			jumpPages(url, id) {
				if(id == 4){
					uni.makePhoneCall({
						phoneNumber: this.platformMobile,
						success(res) {
							// cconsole.log('拨打电话成功', res);
						},
						fail(err) {
							console.log('拨打电话失败', err);
						}
					})
					return 
				}
				if (id == 5||id==9) {
					// this.viewSrc = url
					// this.$emit('showWebview')
					uni.navigateTo({
						url:'/pages/webView/webView?url='+url
					})
					return false
				}
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-box {
		z-index: 999;
		border-radius: 40rpx 40rpx 0 0;
		padding: 0 40rpx;
		margin-top: 0;
		border-radius: 40rpx 40rpx 0 0;
		background: #fff;
		position: relative;
		top: -20px;
	}
	.circle {
	  width: 6px;
	  height: 6px;
	  background: #2CB9A4;
	  border-radius: 50%;
	  display: inline-block;
	
	}
	.list-item {
		height: 100upx;
		line-height: 100upx;
		border-bottom: 1upx solid #ECECEC;

		.ai-c {
			justify-content: space-between;
			flex: 1;
		}

		.f-row-f {
			color: #081738;
			font-size: 28rpx;
		}

		.f-row-r {
			color: #979797;
			font-size: 28rpx;
		}
	}

	.list-item:last-child {
		border: none;
	}

	text {
		color: #4D4D4D;
		font-size: 28upx
	}

	.icon {
		width: 30upx;
		height: 30upx;
		margin-right: 20upx;
	}
</style>